<template>
  <div class="tw-relative tw-inline-flex tw-items-center">
    <!-- 头像列表 -->
    <div
      v-for="(avatar, index) in visibleAvatars"
      :key="index"
      class="tw-relative tw-transition-all tw-duration-300"
      :style="{
        marginLeft: `${index > 0 ? '-5px' : '0'}`,
        width: `${avatarSize}px`,
        height: `${avatarSize}px`,
        zIndex: `${100 - index}`,
      }"
    >
      <img
        :src="avatar"
        alt="User Avatar"
        class="tw-w-full tw-h-full tw-object-cover tw-rounded-full tw-border-2 tw-border-white tw-shadow-sm tw-hover:tw-z-50 tw-transition-transform tw-duration-300 tw-hover:tw-scale-110"
      />
    </div>

    <!-- 超出数量显示徽章 -->
    <!-- 
    <div
      v-if="avatars.length > maxVisible"
      class="tw-absolute tw-right-0 tw-bottom-0 tw-w-8 tw-h-8 tw-rounded-full tw-bg-gray-200 tw-border-2 tw-border-white tw-flex tw-items-center tw-justify-center tw-text-xs tw-font-bold tw-text-gray-700 tw-z-50"
    >
      +{{ avatars.length - maxVisible }}
    </div> 
    -->
  </div>
</template>

<script>
  export default {
    props: {
      avatars: {
        type: Array,
        required: true,
        default: () => [],
      },
      maxVisible: {
        type: Number,
        default: 4,
      },
      avatarSize: {
        type: [String, Number],
        default: 48,
      },
    },
    computed: {
      visibleAvatars() {
        return this.avatars.slice(0, this.maxVisible);
      },
    },
  };
</script>
